/* pages/join/index.wxss */
.join {
  .page-content {
    .top {
      position: relative;
      width: 100%;
      height: 356rpx;

      .top-bg {
        width: 100%;
        height: 100%;
      }

      .top-title {
        position: absolute;
        left: 0;
        width: 100%;
        font-size: 17px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;

        // border:1px solid red;
        .back {
          position: absolute;
          left: 40rpx;
        }
      }
    }

    .banner {
      width: 100%;
      height: 100rpx;
      position: relative;

      .banner-image {
        position: absolute;
        left: 50%;
        width: 690rpx;
        height: 300rpx;
        transform: translate(-50%, -200rpx);
        border-radius: 10rpx;
      }
    }

    .form {
      padding: 55rpx 0;
      width: 550rpx;
      margin: 0 auto;

      .form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #dfdfdf;
        padding: 4rpx 0;

        +.form-item {
          margin-top: 34rpx;
        }

        .left {
          font-size: 30rpx;
          font-weight: 500;
          color: #333333;

          .required {
            color: #FF6326;
            margin-left: 6rpx;
          }
        }

        .right {
          display: flex;
          align-items: center;

          .picker {
            display: flex;
            align-items: center;

            .picker-content {
              display: flex;
              align-items: center;
            }
          }

          .input-wrapper {
            margin-right: 12rpx;
            // border: 1px solid red;

            .input {
              text-align: right;
            }
          }

          .icon-arrow {
            width: 19rpx;
            height: 30rpx;
          }
        }
      }
    }

    .btn-joinUs {
      display: block;
      width: 550rpx;
      height: 80rpx;
      margin: 0 auto;
    }

    .agreements {
      width: 550rpx;
      margin: 24rpx auto;
      display: flex;
      align-items: center;

      .agreement {
        font-size: 26rpx;
        font-weight: 400;
        color: #009DFF;
      }
    }
  }
}